<!--
 * @Description: 项目根组件
 * @Author: ceam
 * @02-07 16:23:00
 * @LastEditors: ceam
 * @LastEditTime: 03-12 19:30:36
 -->
<template>
    <div id="app" name="app" class="app">
        <div class="top">
            <!-- 回到顶部 -->
            <el-backtop :bottom="100">
                <div style="{
                height: 100vh;
                width: 100%;
                background-color: #f2f5f6;
                box-shadow: 0 0 6px rgba(0,0,0, .12);
                text-align: center;
                line-height: 40px;
                color: #1989fa;
              }"
                >
                    UP
                </div>
            </el-backtop>
        </div>
        <el-container>
            <!-- 顶部导航栏 -->
            <div class="topbar">
                <div class="nav">
                  <h2 style="color: #fff; float: left; margin-top: 5px">求职招聘管理系统</h2>
                    <ul>
                        <li v-if="!this.user.username">
                          <el-button type="text" @click="login">登录</el-button>
                          <span class="sep">|</span>
                          <el-button type="text" @click="toRegister">注册</el-button>
                        </li>
                        <li v-else>
                            欢迎
                            <el-popover placement="top" width="180" v-model="visible">
                                <p>确定退出登录吗？</p>
                                <div style="text-align: right; margin: 10px 0 0">
                                    <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                                    <el-button type="primary" size="mini" @click="logout">确定</el-button>
                                </div>
                                <el-button type="text" slot="reference">{{this.user.username}}</el-button>
                            </el-popover>
                        </li>
                        <li>
                            <router-link to="/backHome">后台</router-link>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 顶部导航栏END -->

            <!-- 顶栏容器 -->
            <el-header>
                <el-menu
                        :default-active="activeIndex"
                        class="el-menu-demo"
                        mode="horizontal"
                        active-text-color="#409eff"
                        router
                >
                    <div class="logo">
                        <router-link to="/">
                            <img style="width: 90px; height: 45px" src="../assets/images/icon_ceam3.png" alt />
                        </router-link>
                    </div>
                  <el-menu-item index="/front">首页</el-menu-item>
                  <el-menu-item index="/frontCompany">公司</el-menu-item>
                  <el-menu-item index="/frontJob">职位</el-menu-item>
                  <!--<el-menu-item index="/frontNotice">公告</el-menu-item>-->

                    <!-- <el-menu-item index="/about">关于我们</el-menu-item> -->

                  <!-- <div class="so">
                      <el-input placeholder="请输入搜索内容" v-model="search">
                          <el-button slot="append" icon="el-icon-search" @click="searchClick"></el-button>
                      </el-input>
                  </div> -->
              </el-menu>
          </el-header>
          <!-- 顶栏容器END -->

            <!-- 主要区域容器 -->
            <el-main>
                <keep-alive>
                    <router-view></router-view>
                </keep-alive>
            </el-main>
            <!-- 主要区域容器END -->

            <!-- 底栏容器 -->
            <el-footer>
                <div class="footer">
                    <div class="ng-promise-box">
                        <div class="ng-promise">
                            <p class="text">
                                <a class="icon1" href="javascript:;">优质的企业</a>
                                <a class="icon2" href="javascript:;">优质的工程师</a>
                                <a class="icon3" style="margin-right: 0" href="javascript:;">找工作就上CeaM招聘网</a>
                            </p>
                        </div>
                    </div>
                    <div class="github">

                            <div class="github-but"></div>

                    </div>
                    <div class="mod_help">
                        <p>
                            <router-link to="/">首页</router-link>
                            <span>|</span>
                            <router-link to="/">全部</router-link>
                            <span>|</span>
                            <router-link to="/">轮播图</router-link>
                            <span>|</span>
                            <!-- <router-link to="/about">关于我们</router-link> -->
                        </p>
                        <p class="coty">招聘系统版权所有 &copy;CeaM 2019-2023</p>
                    </div>
                </div>
            </el-footer>
            <!-- 底栏容器END -->
        </el-container>

      <!--表单渲染-->
      <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelR" :visible.sync="visibleR" title="注册" width="570px">
        <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="66px">
          <el-form-item label="账号" prop="username">
            <el-input v-model="form.username" />
          </el-form-item>
          <el-form-item label="电话" prop="phoneNum">
            <el-input v-model.number="form.phoneNum" />
          </el-form-item>
          <el-form-item label="姓名" prop="nickname">
            <el-input v-model="form.nickname" />
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" />
          </el-form-item>

          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="form.sex" style="width: 178px">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="角色" prop="roleId">
            <el-radio-group v-model="form.roleId" style="width: 178px">
              <el-radio :label="19">hr</el-radio>
              <el-radio :label="6">求职者</el-radio>
            </el-radio-group>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="cancelR">取消</el-button>
          <el-button type="primary" @click="submitR">确认</el-button>
        </div>
      </el-dialog>

    </div>
</template>

<script>
  import { register } from '@/api/system/user'
    import { mapActions } from "vuex";
    import { mapGetters } from "vuex";

    export default {
        beforeUpdate() {
            this.activeIndex = this.$route.path;
        },
        data() {
          // 自定义验证
          const validPhone = (rule, value, callback) => {
            if (!value) {
              callback(new Error('请输入电话号码'))
            } else if (!isvalidPhone(value)) {
              callback(new Error('请输入正确的11位手机号码'))
            } else {
              callback()
            }
          }
            return {
              form: {},
              roles: [],
              visibleR: false,
                activeIndex: "", // 头部导航栏选中的标签
                search: "", // 搜索条件
                register: false, // 是否显示注册组件
                visible: false, // 是否退出登录
              rules: {
                username: [
                  { required: true, message: '请输入用户名', trigger: 'blur' },
                  { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                ],
                nickname: [
                  { required: true, message: '请输入用户昵称', trigger: 'blur' },
                  { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                ],
                email: [
                  { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                  { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
                ],
                roleId: [
                  { required: true, message: '请选择角色', trigger: 'blur' }
                ],
                phoneNum: [
                  { required: true, trigger: 'blur', validator: validPhone }
                ]
              }
            };
        },
        created() {
            this.logg()
            // 对用户信息进行校验，并刷新cookie
            // if (this.getCookie('XM_TOKEN') != null) {
            //     this.$axios
            //         .get("/api/user/token")
            //         .then(res => {
            //             if (res.data.code === "001") {
            //                 // 001 为成功
            //                 this.setUser(res.data.data);
            //             }
            //         });
            //     let cookie = this.getCookie('XM_TOKEN');
            //     let user = {};
            //     user.userId = cookie.split("|")[1];
            //     user.username = cookie.split("|")[2];
            //     this.setUser(user);
            // }

        },
        computed: {
            ...mapGetters(["user", "getNum"])
        },
        methods: {
            ...mapActions(["LogOut", "setUser", "setShowLogin", "setShoppingCart"]),
            login() {
                // 点击登录按钮, 通过更改vuex的showLogin值显示登录组件
                this.$router.push({path : '/login'});
            },
          cancelR() {
              this.visibleR = false;
          },
          toRegister() {
              this.visibleR = true;
          },
          submitR() {
            const initRole = {
              id: this.form.roleId
            }
            // this.roles.forEach(function(role, index) {
            //   role.push(this.form.roleId)
            // })
            this.roles.push(initRole);
            this.form.roles = this.roles
            register(this.form).then(res => {
                this.visibleR = false;
                this.$message({
                  message: '注册成功',
                  type: 'success'
                })
              }).catch(error => {
                this.$message({
                  message: '注册失败',
                  type: 'warning'
                })
              })
          },
            logg(){
              console.log("this.$store.getters.user.username ", this.$store.getters.user)
              console.log("user.username ", this.user)
            },
            // 退出登录
            logout() {
                this.visible = false;
                // 清空cookie中的token
                this.delCookie("XM_TOKEN");
                // 清空vuex登录信息
                //this.LogOut();
              this.user = {};
              this.$store.dispatch('setUser').then(() => {
                this.user = {};
              })
              this.$store.dispatch('LogOut').then(() => {
                location.reload()
                this.$router.push({ path: '/' })
              })
              console.log("this.user >>", this.user)
                this.$message({
                    message: '成功退出登录',
                    type: 'success'
                });

            },
            // 接收注册子组件传过来的数据
            isRegister(val) {
                this.register = val;
            },
            // 点击搜索按钮
            searchClick() {
                if (this.search != "") {
                    // 跳转到全部商品页面,并传递搜索条件
                    this.$router.push({ path: "/goods", query: { search: this.search } });
                    this.search = "";
                }
            },
            getCookie(name) { //获取指定名称的cookie值
                // (^| )name=([^;]*)(;|$),match[0]为与整个正则表达式匹配的字符串，match[i]为正则表达式捕获数组相匹配的数组；
                let arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
                if(arr != null) {
                    return unescape(arr[2]);
                }
                return null;
            },
            delCookie(name) {
                let exp = new Date();
                exp.setTime(exp.getTime() - 1);
                let cval = this.getCookie(name);
                if (cval != null)
                    document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
            }
        }
    };
</script>

<style>
    /* 全局CSS */
    * {
        padding: 0;
        margin: 0;
        border: 0;
        list-style: none;
    }
    #app .el-header {
        padding: 0;
    }
    #app .el-main {
        min-height: 300px;
        padding: 20px 0;
    }
    #app .el-footer {
        padding: 0;
    }
    a,
    a:hover {
        text-decoration: none;
    }
    /* 全局CSS END */

    /* 顶部导航栏CSS */
    .topbar {
        height: 40px;
        background-color: #3d3d3d;
        margin-bottom: 20px;
    }
    .topbar .nav {
        width: 1225px;
        margin: 0 auto;
    }
    .topbar .nav ul {
        float: right;
    }
    .topbar .nav li {
        float: left;
        height: 40px;
        color: #b0b0b0;
        font-size: 14px;
        text-align: center;
        line-height: 40px;
        margin-left: 20px;
    }
    .topbar .nav .sep {
        color: #b0b0b0;
        font-size: 12px;
        margin: 0 5px;
    }
    .topbar .nav li .el-button {
        color: #b0b0b0;
    }
    .topbar .nav .el-button:hover {
        color: #fff;
    }
    .topbar .nav li a {
        color: #b0b0b0;
    }
    .topbar .nav a:hover {
        color: #fff;
    }
    .topbar .nav .shopCart {
        width: 120px;
        background: #424242;
    }
    .topbar .nav .shopCart:hover {
        background: #fff;
    }
    .topbar .nav .shopCart:hover a {
        color: #ff6700;
    }
    .topbar .nav .shopCart-full {
        width: 120px;
        background: #ff6700;
    }
    .topbar .nav .shopCart-full a {
        color: white;
    }
    /* 顶部导航栏CSS END */

    /* 顶栏容器CSS */
    .el-header .el-menu {
        max-width: 1225px;
        margin: 0 auto;
    }
    .el-header .logo {
        height: 60px;
        width: 189px;
        float: left;
        margin-right: 0px;
    }
    .el-header .so {
        margin-top: 10px;
        width: 300px;
        float: right;
    }
    /* 顶栏容器CSS END */

    /* 底栏容器CSS */
    .footer {
        width: 100%;
        text-align: center;
        background: #2f2f2f;
        padding-bottom: 20px;
    }
    .footer .ng-promise-box {
        border-bottom: 1px solid #3d3d3d;
        line-height: 145px;
    }
    .footer .ng-promise-box {
        margin: 0 auto;
        border-bottom: 1px solid #3d3d3d;
        line-height: 145px;
    }
    .footer .ng-promise-box .ng-promise p a {
        color: #fff;
        font-size: 20px;
        margin-right: 210px;
        padding-left: 44px;
        height: 40px;
        display: inline-block;
        line-height: 40px;
        text-decoration: none;
        background: url("../assets/images/us-icon.png") no-repeat left 0;
    }
    .footer .github {
        height: 50px;
        line-height: 50px;
        margin-top: 20px;
    }
    .footer .github .github-but {
        width: 50px;
        height: 50px;
        margin: 0 auto;
        background: url("../assets/images/github.png") no-repeat;
    }
    .footer .mod_help {
        text-align: center;
        color: #888888;
    }
    .footer .mod_help p {
        margin: 20px 0 16px 0;
    }

    .footer .mod_help p a {
        color: #888888;
        text-decoration: none;
    }
    .footer .mod_help p a:hover {
        color: #fff;
    }
    .footer .mod_help p span {
        padding: 0 22px;
    }
    /* 底栏容器CSS END */
</style>
